<template>
	<div class="new-page" :style="`min-height: ${pageMinHeight}px`">
		<a-card :bordered="false">
			<div style="display: flex; flex-wrap: wrap">
				<head-info title="文章数量" content="8" :bordered="true" />
				<head-info title="总阅读量" content="32" :bordered="true" />
				<head-info title="总点赞量" content="24" />
			</div>
		</a-card>
		<a-card class="search-form" style="margin-top: 24px">
			<div style="display: flex;justify-content: space-between;">
				<a-form-item style="width: 70%;">
					<span>类型：</span>
					<a-checkable-tag @change="tabClick(tagItem,index2)" v-for="(tagItem,index2) in tabList" :key="index2" v-model="tagItem.type">
						{{tagItem.name}}
					</a-checkable-tag>
				</a-form-item>
				<a-input-search v-model="searchInput" style="width: 30%;margin-top: 5px;" placeholder="搜索" enter-button @search="onSearch" />
			</div>
			
			<div slot="title" class="listTitle">
				<span>文章列表</span>
				<a-button @click="showModal(1,null)" type="primary" icon="plus">
					添加文章
				</a-button>
			</div>

			<a-list item-layout="vertical" size="large" :pagination="{pageSize:5}" :data-source="blogList">
				<template #renderItem="item">
					<a-list-item key="item.title">
						<template #actions>
							<a-button @click="showModal(2,item)" type="primary" size="small">修改</a-button>
							<a-popconfirm title="确认删除吗?" ok-text="确认删除" cancel-text="不删了" @confirm="delList(item.id)">
								<a-button type="danger" size="small">删除</a-button>
							</a-popconfirm>

						</template>
						<template #extra>
							<img width="240" style="min-height: 120px;min-width:240px;background-color:#eeeeee;"
								:src="item.img" />
						</template>

						<a-list-item-meta :description="item.author+' - '+ formatDate(item.createdAt)+' - '+ listType(item.type) ">
							<template #title>
								{{item.title}}
							</template>
							<template #avatar>
								<!-- <a-avatar size="large" src="https://cdn.zhoukaiwen.com/logo.png" /> -->
							</template>
						</a-list-item-meta>
						{{item.content}}
						<div style="margin: 20px 0 20px 0;display: flex; justify-content: space-between;">
							<div>
								<div v-if="item.imgList">
									<a-avatar v-for="(imgItem,index1) in item.imgList.split(',')" :key="index1"
										style="margin-right: 20px;" shape="square" :size="50" :src="imgItem" />
								</div>
							</div>

							<div style="line-height: 50px;">
								<span @click="seeNumAdd(item.id)" style="margin-right: 10px;">
									<svg style="margin-right: 3px;width: 14px;height: 14px;margin-top:-4px;vertical-align: middle;"
										t="1664137403213" class="icon" viewBox="0 0 1024 1024" version="1.1"
										xmlns="http://www.w3.org/2000/svg" p-id="2334" width="200" height="200">
										<path
											d="M513.3 172.5c43 0 88.3 12.5 134.8 37.2 41.6 22.1 84.4 53.9 127.2 94.7C845.8 371.6 901 448 932.5 496c6.6 10 6.6 23 0 33-31.5 48-86.7 124.4-157.3 191.7-42.8 40.8-85.6 72.6-127.2 94.7-46.5 24.7-91.8 37.2-134.8 37.2s-88.3-12.5-134.8-37.2c-41.6-22.1-84.4-53.9-127.2-94.7C180.7 653.4 125.5 577 94 529c-6.6-10-6.6-23 0-33 31.5-48 86.7-124.4 157.3-191.7 42.8-40.8 85.6-72.6 127.2-94.7 46.4-24.6 91.8-37.1 134.8-37.1m0-60c-228.2 0-420.6 273.1-480.6 368-12.4 19.6-12.4 44.5 0 64 60 94.9 252.5 368 480.6 368s420.6-273.1 480.6-368c12.4-19.6 12.4-44.5 0-64-60-94.9-252.5-368-480.6-368z"
											fill="" p-id="2335"></path>
										<path
											d="M513.3 372.5c37.4 0 72.6 14.6 99 41 26.4 26.4 41 61.6 41 99s-14.6 72.6-41 99c-26.4 26.4-61.6 41-99 41s-72.6-14.6-99-41c-26.4-26.4-41-61.6-41-99s14.6-72.6 41-99c26.4-26.4 61.6-41 99-41m0-60c-110.5 0-200 89.5-200 200s89.5 200 200 200 200-89.5 200-200-89.6-200-200-200z"
											fill="" p-id="2336"></path>
									</svg>
									{{item.seeNum}}
								</span>
								<span @click="likeNumAdd(item.id)" style="margin-right: 10px;">
									<svg t="1663961174004"
										style="margin-right: 3px;width: 14px;height: 14px;margin-top:-4px;vertical-align: middle;"
										class="icon" viewBox="0 0 1024 1024" version="1.1"
										xmlns="http://www.w3.org/2000/svg" p-id="2275" width="200" height="200">
										<path
											d="M994.816 409.088c-25.088-32.256-62.464-50.688-102.4-50.688H665.6c-16.896 0-29.184-16.384-24.576-32.768 53.76-195.584-31.232-271.872-90.624-300.544-36.864-17.408-69.12-18.944-95.744-3.584-36.864 20.992-58.88 72.192-66.048 156.672-8.704 97.792-38.4 147.456-64.512 173.056-4.608 4.608-11.264 7.168-17.92 7.168H131.584C58.88 358.4 0 419.84 0 495.616v391.168C0 962.56 58.88 1024 131.584 1024h659.968c59.392 0 111.616-41.984 126.976-101.376l100.864-391.168c11.264-43.008 2.048-87.552-24.576-122.368zM204.8 962.56c0 5.632-4.608 10.24-10.24 10.24H131.584C87.04 972.8 51.2 934.4 51.2 886.784V495.616C51.2 448 87.04 409.6 131.584 409.6H194.56c5.632 0 10.24 4.608 10.24 10.24v542.72z m372.736-599.04c1.024 26.112 22.528 46.08 48.64 46.08h266.752c24.064 0 46.592 11.264 61.44 31.232 16.896 22.016 22.528 50.688 15.872 77.824l-100.864 391.168c-9.728 37.376-41.472 62.976-77.312 62.976H250.88c-5.632 0-10.24-4.608-10.24-10.24V419.84c0-5.632 4.608-10.24 10.24-10.24h64.512c11.776 0 23.04-3.584 31.744-11.264 12.288-9.728 25.088-22.528 37.376-39.936 25.6-36.352 48.128-91.648 55.296-175.616 7.68-86.016 28.672-110.08 40.448-116.736 11.264-6.144 27.648-4.608 48.128 5.632 83.968 40.448 101.376 137.728 50.688 282.112-1.536 3.072-2.048 6.144-1.536 9.728z"
											p-id="2276"></path>
									</svg>
									{{item.likesNum}}
								</span>
								<span @click="shareNumAdd(item.id)" style="margin-right: 10px;">
									<svg style="margin-right: 3px;width: 14px;height: 14px;margin-top:-4px;vertical-align: middle;" t="1664227987871" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2640" width="200" height="200"><path d="M731.853244 632.66008c-45.715181 0-87.117127 18.782785-116.91478 49.028647L446.790836 572.381206c7.356548-18.630313 11.400654-38.917358 11.400654-60.132542 0-24.076348-5.208629-46.958498-14.557554-67.578118l133.303029-96.266507c29.262464 26.948769 68.303642 43.433208 111.13003 43.433208 90.543156 0 164.196643-73.653487 164.196643-164.196643S778.61015 63.433728 688.066995 63.433728s-164.196643 73.66372-164.196643 164.207899c0 24.076348 5.208629 46.957475 14.556531 67.577095l-133.303029 96.266507c-29.262464-26.948769-68.303642-43.433208-111.129007-43.433208-90.543156 0-164.196643 73.653487-164.196643 164.196643s73.653487 164.196643 164.196643 164.196643c45.721321 0 87.129406-18.787902 116.928083-49.040926l168.140465 109.303428c-7.360641 18.634406-11.406794 38.928614-11.406794 60.149938 0 90.543156 73.653487 164.196643 164.196643 164.196643s164.196643-73.653487 164.196643-164.196643S822.396399 632.66008 731.853244 632.66008zM688.066995 129.11259c54.326303 0 98.517781 44.202735 98.517781 98.529037 0 54.326303-44.192501 98.517781-98.517781 98.517781-32.122605 0-60.699454-15.452947-78.695317-39.314401-0.341784-0.535189-0.695848-1.064238-1.072425-1.585101-0.379647-0.527003-0.775666-1.034563-1.180895-1.531889-11.070126-15.928784-17.569144-35.261085-17.569144-56.086389C589.549214 173.315324 633.740692 129.11259 688.066995 129.11259zM377.292995 564.79646c-0.254803 0.360204-0.508583 0.721431-0.751107 1.094938-0.231267 0.356111-0.446162 0.716314-0.662079 1.077541-17.692964 26.391067-47.791469 43.798529-81.884962 43.798529-54.326303 0-98.517781-44.192501-98.517781-98.517781 0-54.326303 44.192501-98.517781 98.517781-98.517781 54.326303 0 98.517781 44.192501 98.517781 98.517781C392.512628 531.555381 386.9264 549.578874 377.292995 564.79646zM731.853244 895.374504c-54.326303 0-98.517781-44.192501-98.517781-98.517781 0-19.455097 5.669116-37.609573 15.440667-52.900837 0.176009-0.254803 0.360204-0.500397 0.530073-0.762363 0.162706-0.25071 0.312108-0.506537 0.467651-0.760317 17.666358-26.555819 47.860031-44.094264 82.080413-44.094264 54.326303 0 98.517781 44.192501 98.517781 98.517781C830.371024 851.183026 786.178523 895.374504 731.853244 895.374504z" p-id="2641"></path></svg>
									{{item.commentNum}}
								</span>
							</div>

						</div>
					</a-list-item>
				</template>
			</a-list>

			<!-- 修改弹出 -->
			<!-- wrap-class-name="full-modal" 全屏 -->
			<a-modal v-model:visible="visible" width="50%" :maskClosable='false' :closable='false'
				:title="modalTitle == 1 ? '修改文章':'新增文章'">
				<div>
					<a-form>
						<div class="clearfix coverImgBox">
							<a-upload :customRequest="customRequest" list-type="picture-card" :file-list="fileList"
								@preview="handlePreview" @change="coverImgDel">
								<div v-if="fileList.length < 1">
									<a-icon type="plus" />
									<div class="ant-upload-text">
										上传封面图
									</div>
								</div>
							</a-upload>
							<a-modal width="80%"  :visible="previewVisible1" :footer="null" @cancel="handleCancel1">
								<img alt="example" style="width: 100%" :src="coverImg" />
							</a-modal>
						</div>

						<a-form-item label="标题" :labelCol="{span: 3}" :wrapperCol="{span: 20}">
							<a-input v-model="blogTitle" placeholder="请输入标题" />
						</a-form-item>
						<a-form-item label="文章类型" :labelCol="{span: 3}" :wrapperCol="{span: 20}">
							<a-select v-model="blogType" placeholder="请选择">
								<a-select-option value="2">前端开发</a-select-option>
								<a-select-option value="3">UI设计</a-select-option>
								<a-select-option value="4">Node后台</a-select-option>
								<a-select-option value="5">面试精选</a-select-option>
								<a-select-option value="6">技术前沿</a-select-option>
								<a-select-option value="7">更多资讯</a-select-option>
							</a-select>
						</a-form-item>
						<a-form-item label="文章内容" :labelCol="{span: 3}" :wrapperCol="{span: 20}">
							<a-textarea v-model="blogContent" rows="4" placeholder="文章内容" />
						</a-form-item>

						<a-form-item label="文章作者" :labelCol="{span: 3}" :wrapperCol="{span: 20}">
							<a-input v-model="blogAuthor" placeholder="文章作者" />
						</a-form-item>

						<a-form-item label="内容图片" :labelCol="{span: 3}" :wrapperCol="{span: 20}">
							<div class="clearfix">
								<a-upload :customRequest="customRequest2" list-type="picture-card" :file-list="fileList2"
									@preview="handlePreview2" @change="coverImgDel2">
									<div v-if="fileList2.length < 15">
										<a-icon type="plus" />
										<div class="ant-upload-text">
											上传内容图
										</div>
									</div>
								</a-upload>
								<a-modal width="80%" :visible="previewVisible2" :footer="null" @cancel="handleCancel2">
									<img alt="example" style="width: 100%" :src="contentImg" />
								</a-modal>
							</div>
						</a-form-item>
					</a-form>

				</div>
				<template #footer>
					<a-button key="back" @click="handleOk">取消</a-button>
					<a-button key="submit" type="primary" @click="setData">确认</a-button>
				</template>

			</a-modal>
		</a-card>
	</div>
	</div>
</template>

<script>
	var requestUrl = 'http://192.168.0.101:8080/'
	import TagSelect from '@/components/tool/TagSelect'
	const TagSelectOption = TagSelect.Option
	import HeadInfo from '@/components/tool/HeadInfo'
	import axios from 'axios'
	import * as qiniu from 'qiniu-js'
	import {
		mapState
	} from 'vuex'
	export default {
		name: 'Demo',
		components: {
			HeadInfo,
			TagSelectOption,
			TagSelect
		},
		data() {
			return {
				tabList:[
					{
						id: 1,
						name: '全部',
						type: true,
					},
					{
						id: 2,
						name: 'web前端',
						type: false,
					},
					{
						id: 3,
						name: 'ui设计',
						type: false,
					},
					{
						id: 4,
						name: 'Node后端',
						type: false,
					},
					{
						id: 5,
						name: '面试精选',
						type: false,
					},
					{
						id: 6,
						name: '技术前沿',
						type: false,
					},
					{
						id: 7,
						name: '更多资讯',
						type: false,
					}
				],
				blogList: [],
				fileList: [
					// {
					// 	uid: '-1',
					// 	name: 'image.png',
					// 	status: 'done',
					// 	url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
					// }
				],
				fileList2:[],
				previewVisible1: false,
				previewVisible2: false,
				contentImg:'',
				modalTitle: '新增/修改',
				visible: false,
				blogType: undefined,
				coverShow: false,

				blogTitle: '',
				coverImg: '',
				blogContent: '',
				blogAuthor: '',
				itemId: '', //修改时的id
				
				searchTypeId:'', 
				searchInput:'', 
			}
		},
		computed: {
			...mapState('setting', ['pageMinHeight']),
			desc() {
				return this.$t('description')
			}
		},
		mounted() {
			this.getList();
		},
		methods: {
			tabClick(item,index){
				console.log(item);
				for (let i = 0; i < this.tabList.length; i++) {
					this.tabList[i].type = false;
				};
				
				this.tabList[index].type = true;
				this.searchTypeId = item.id;
				console.log(this.searchTypeId)
				console.log(this.searchInput)
				this.getList();
			},
			onSearch(){
				console.log(this.searchTypeId)
				console.log(this.searchInput)
				console.log('onSearch');
				this.getList();
			},
			handlePreview() {
				console.log('handlePreview')
				this.previewVisible1 = true;
			},
			coverImgDel() {
				console.log('coverImgDel');
				this.coverImg = '';
				this.fileList = [];
			},
			handleCancel1() {
				console.log('handleCancel1')
				this.previewVisible1 = false;
			},
			// 封面图上传
			customRequest(e) {
				console.log('customRequest:', e);
				var that = this;
				axios.post(requestUrl + 'api/upload').then(function(response) {
					if (response.data.code == 200) {
						console.log('response', response.data)
						const qnToken = response.data.message; //七牛云token
						const file = e.file; //上传的文件
						const putExtra = {};
						const config = {};

						const observable = qiniu.upload(file, file.filename, qnToken, putExtra, config)
						const observer = {
							next(res) {
								console.log(res);
							},
							error(err) {
								alert('上传失败')
							},
							complete(res) {
								console.log(res)
								that.coverImg = 'https://cdn.zhoukaiwen.com/' + res.key;
								const fileList = {
									uid: res.key,
									name: res.key,
									status: 'done',
									url: 'https://cdn.zhoukaiwen.com/' + res.key,
								}
								that.fileList.push(fileList);
								console.log(coverImg)
								console.log(fileList)
							}
						}
						const subscription = observable.subscribe(observer)
					}
					return;
				})
			},
			handlePreview2(file) {
				console.log(file)
				this.contentImg = file.url;
				console.log('handlePreview2')
				this.previewVisible2 = true;
			},
			coverImgDel2(e) {
				console.log('coverImgDel2');
				console.log(e.file.url);
				if(e.file.url){
					console.log('删除操作')
					const delUrl = e.file.url;
					this.fileList2 = this.fileList2.filter((list) => {
						return list.url !== delUrl
					})
					console.log(this.fileList2)
				}else{
					console.log('新增操作')
				}
				
			},
			handleCancel2() {
				console.log('handleCancel2')
				this.previewVisible2 = false;
			},
			// 内容图上传
			customRequest2(e) {
				console.log('customRequest2:', e);
				var that = this;
				axios.post(requestUrl + 'api/upload').then(function(response) {
					if (response.data.code == 200) {
						console.log('response', response.data)
						const qnToken = response.data.message; //七牛云token
						const file = e.file; //上传的文件
						const putExtra = {};
						const config = {};
			
						const observable = qiniu.upload(file, file.filename, qnToken, putExtra, config)
						const observer = {
							next(res) {
								console.log(res);
							},
							error(err) {
								alert('上传失败')
							},
							complete(res) {
								console.log(res)
								const fileList = {
									uid: res.key,
									name: res.key,
									status: 'done',
									url: 'https://cdn.zhoukaiwen.com/' + res.key,
								}
								that.fileList2.push(fileList);
								console.log(that.fileList2)
							}
						}
						const subscription = observable.subscribe(observer)
					}
					return;
				})
			},
			getList() {
				if(this.searchTypeId == 1){
					this.searchTypeId = '';
				}
				const that = this;
				axios.get(requestUrl + 'api/blog/list?searchTypeId='+this.searchTypeId+'&searchInput='+this.searchInput, ).then(function(res) {
					if (res.data.code == 200) {
						console.log(res.data)
						that.blogList = res.data.data;
					}
					return;
				})
			},
			// 删除列表
			delList(id) {
				var that = this;
				console.log(id)
				const delId = {
					"id": id
				}
				axios.post(requestUrl + 'api/blog/delete', delId, {
					headers: {
						'Content-Type': 'application/json',
					}
				}).then(function(response) {
					console.log('response', response)
					if (response.data.code == 200) {
						that.getList()
					}
					return;
				})
			},
			handleOk(e) {
				console.log('handleOk')
				this.visible = false;
			},
			// 显示弹窗：修改/新增
			showModal(type, item) {
				// 弹窗前,先清除页面原有数据;
				this.itemId = '';
				this.blogType = undefined;
				this.blogTitle = '';
				this.coverImg = '';
				this.blogContent = '';
				this.blogAuthor = '';
				this.fileList = [];
				this.fileList2 = [];
				if (item) {
					// 修改
					this.modalTitle = 1;
					console.log(item)
					this.fileList = [
						{
							uid: item.img,
							name: item.img,
							status: 'done',
							url: item.img
						}
					];
					if(item.imgList){
						// console.log(item.imgList.split(','))
						for (let i = 0; i < item.imgList.split(',').length; i++) {
							const fileList = {
								uid: item.imgList.split(',')[i],
								name: item.imgList.split(',')[i],
								status: 'done',
								url: item.imgList.split(',')[i],
							}
							this.fileList2.push(fileList);
						}
					}
					this.itemId = item.id;
					this.blogType = item.type;
					this.blogTitle = item.title;
					this.coverImg = item.img;
					this.blogContent = item.content;
					this.blogAuthor = item.author;
				} else {
					// 新增
					this.modalTitle = 2;
					this.itemId = '';
					this.blogType = undefined;
					this.blogTitle = '';
					this.coverImg = '';
					this.blogContent = '';
					this.blogAuthor = '';
					this.fileList = [];
					this.fileList2 = [];
				}
				this.visible = true;
			},
			// 新增/修改方法
			setData() {
				var that = this;
				let contentList = '';
				for (let i = 0; i < this.fileList2.length; i++) {
					contentList += this.fileList2[i].url+ ",";
				}
				//去掉最后一个逗号(如果不需要去掉，就不用写)
				if (contentList.length > 0) {
					contentList = contentList.substr(0, contentList.length - 1);
				}
				console.log(contentList);
				if (this.modalTitle == 1) {
					console.log('修改')
					var changeData = {
						"id": this.itemId,
						"type": this.blogType,
						"title": this.blogTitle,
						"img": this.coverImg,
						"content": this.blogContent,
						"author": this.blogAuthor,
						"imgList": contentList
					}
					console.log(changeData)
					axios.post(requestUrl + 'api/blog/update', changeData, {
						headers: {
							'Content-Type': 'application/json',
						}
					}).then(function(response) {
						console.log(response)
						if (response.data.code == 200) {
							that.visible = false;
							that.getList();
						}
						return;
					})
				} else {
					console.log('新增')
					if (this.blogType == '' || this.blogTitle == '' || this.blogContent == '' || this.blogAuthor == '') {
						this.$message.error('请完整输入内容');
						return false;
					}
					var addData = {
						"type": this.blogType,
						"title": this.blogTitle,
						"img": this.coverImg,
						"content": this.blogContent,
						"author": this.blogAuthor,
						"imgList": contentList
					}
					axios.post(requestUrl + 'api/blog/new', addData, {
						headers: {
							'Content-Type': 'application/json',
						}
					}).then(function(response) {
						console.log(response)
						if (response.data.data.id) {
							that.visible = false;
							that.getList()
						}
						return;
					})
				}
			},
			// 调用详情
			seeNumAdd(id) {
				var that = this;
				console.log(id);
				axios.get(requestUrl + 'api/blog/detail?id=' + id).then(function(response) {
					console.log(response)
					if (response.data.data.title) {
						that.getList()
					}
					return;
				})
			},
			// 点赞功能 +1
			likeNumAdd(id) {
				var that = this;
				console.log(id);
				axios.get(requestUrl + 'api/blog/like?id=' + id).then(function(response) {
					console.log(response)
					if (response.data.code == 200) {
						that.getList()
					}
					return;
				})
			},
			
			// 分享功能 +1
			shareNumAdd(id) {
				var that = this;
				console.log(id);
				axios.get(requestUrl + 'api/blog/share?id=' + id).then(function(response) {
					console.log(response)
					if (response.data.code == 200) {
						that.getList()
					}
					return;
				})
			},
			formatDate(value) {
				if (value == undefined) {
					return;
				}
				// let date = new Date(value * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
				let date = new Date(value);
				let y = date.getFullYear();
				let MM = date.getMonth() + 1;
				MM = MM < 10 ? ('0' + MM) : MM; //月补0
				let d = date.getDate();
				d = d < 10 ? ('0' + d) : d; //天补0
				let h = date.getHours();
				h = h < 10 ? ('0' + h) : h; //小时补0
				let m = date.getMinutes();
				m = m < 10 ? ('0' + m) : m; //分钟补0
				let s = date.getSeconds();
				s = s < 10 ? ('0' + s) : s; //秒补0
				return y + '-' + MM + '-' + d + ' ' + h + ':' + m; //年月日时分秒
			},
			listType(value){
				if (!value) {
					return;
				}
				if(value == 2){
					return 'web前端'
				}
				if(value == 3){
					return 'ui设计'
				}
				if(value == 4){
					return 'Node后端'
				}
				if(value == 5){
					return '面试精选'
				}
				if(value == 6){
					return '技术前沿'
				}
				if(value == 7){
					return '更多资讯'
				}
			}
		}
	}
</script>

<style lang="less">
	.listTitle {
		display: flex;
		justify-content: space-between;
	}

	.full-modal {
		.ant-modal {
			max-width: 100%;
			top: 0;
			padding-bottom: 0;
			margin: 0;
		}

		.ant-modal-content {
			display: flex;
			flex-direction: column;
			height: calc(100vh);
		}

		.ant-modal-body {
			flex: 1;
		}
	}

	.ant-list-item-extra {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.coverImgBox .ant-upload.ant-upload-select-picture-card {
		float: none;
		margin: 0 auto;
	}
	.coverImgBox .ant-upload-list-picture-card-container{
		float: none;
		margin: 0 auto;
	}
</style>
